<template>
    <div class="order">
        <el-tabs v-model="activeName" class="ordertab" type="border-card">
            <el-tab-pane label="待支付" name="first" @click="getOrdersAll">
                <el-table :data="payList" border stripe style="width: 100%">
                    <el-table-column type="index" align="center" :index="indexMethod" width="40"></el-table-column>
                    <el-table-column label="订单号" width="220">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getDetail(scope.row.products)">{{ scope.row._id }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="时间" width="180"> </el-table-column>
                    <el-table-column prop="address" label="收货信息"> </el-table-column>
                    <el-table-column label="总价" width="80">
                        <template slot-scope="scope">
                            ￥{{ scope.row.totalPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  width="100">
                        <template slot-scope="scope">
                            <el-button  icon="el-icon-position"  size="mini" type="primary" @click="pay(scope.row._id)">去支付</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="待收货" name="second" @click="getOrdersAll">
                <el-table :data="confirmList" border stripe style="width: 100%">
                    <el-table-column type="index" align="center" :index="indexMethod" width="40"> </el-table-column>
                    <el-table-column label="订单号" width="220">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getDetail(scope.row.products)">{{ scope.row._id }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="时间" width="150"> </el-table-column>
                    <el-table-column prop="address" label="收货信息"> </el-table-column>
                    <el-table-column label="总价" width="70">
                        <template slot-scope="scope">
                            ￥{{ scope.row.totalPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  width="100">
                        <template slot-scope="scope">
                            <el-button  size="mini" type="primary" @click="confirm(scope.row._id)">确认收货</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="全部订单" name="fourth" @click="getOrdersAll">
                <el-table :data="orders" border stripe style="width: 100%">
                    <el-table-column type="index" align="center" :index="indexMethod" width="40"> </el-table-column>
                    <el-table-column label="订单号" width="220">
                        <template slot-scope="scope">
                            <el-button type="text" @click="getDetail(scope.row.products)">{{ scope.row._id }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addTime" label="时间" width="180"> </el-table-column>
                    <el-table-column label="总价" width="80">
                        <template slot-scope="scope">
                            ￥{{ scope.row.totalPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="收货信息"> </el-table-column>
                    <el-table-column label="状态" width="80">
                        <template slot-scope="scope">
                            {{ scope.row.state === 1 ? '待支付' : scope.row.state === 2 ? '待收货' : '已完成' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  width="100">
                        <template slot-scope="scope">
                            <el-button icon="el-icon-delete" size="mini" type="danger" @click="delOrder(scope.row._id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog  :visible.sync="dialogVisible" width="900px" :before-close="handleClose">
            <el-table :data="detailList" border stripe>
                <el-table-column type="index" align="center" :index="indexMethod" width="40"></el-table-column>
                <el-table-column prop="imgPath" label="图片" width="140">
                    <template slot-scope="scope">
                        <img :src="scope.row.imgPath" alt="" width="100">
                    </template>
                </el-table-column>
                <el-table-column prop="productName" label="名称" width="120"> </el-table-column>
                <el-table-column prop="author" label="作者" width="80"> </el-table-column>
                <el-table-column prop="press" label="出版社" width="175"> </el-table-column>
                <el-table-column prop="price" label="价格" width="80"> </el-table-column>
                <el-table-column prop="date" label="出版日期" width="140"> </el-table-column>
                <el-table-column prop="num" label="数量" width="80"> </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script src="../assets/js/OrderManageView.js"></script>
<style src="../assets/css/OrderManageView.css" scoped></style>